import React, { PureComponent, Fragment } from 'react'
import { connect } from 'dva'
import { Trans, withI18n } from '@lingui/react'
import {
  Tag,
  Tooltip,
  Input,
  Icon,
  Button,
  Typography,
  Divider,
  Empty,
  Spin,
} from 'antd'
import { UserLink } from 'components'
const { Paragraph, Title } = Typography

@withI18n()
@connect(({ devices, app, loading }) => {
  const { isMobile } = app
  const { projects, choosedproject } = devices
  const projectlaoding = loading.effects[`devices/projects`]
  const getcanaddloading =
    loading.effects[`devices/getProjectCanAdd`] ||
    loading.effects[`devices/projectSetCanAdd`]
  return {
    projects,
    choosedproject,
    isMobile,
    projectlaoding,
    getcanaddloading,
  }
})
class Workers extends PureComponent {
  constructor(props) {
    super(props)
    window.worker_title = this
  }
  state = {
    chooseprojectCanAdd: false,
  }
  map = undefined
  markpoint = undefined
  initMap(targmap = undefined) {
    const modal = window.worker_title
    var map = targmap
    const initcontrols = () => {
      map.enableScrollWheelZoom(true)
      map.addControl(new BMap.MapTypeControl())
      map.addControl(new BMap.ScaleControl())
      var opts = {
        type: BMAP_NAVIGATION_CONTROL_SMALL,
        anchor: BMAP_ANCHOR_TOP_LEFT,
      }
      map.addControl(new BMap.NavigationControl(opts))
    }
    if (!map) {
      if (modal.map) {
        map = modal.map
      } else {
        map = new BMap.Map('worker_map')
        initcontrols()
      }
    } else {
      initcontrols()
    }
    modal.map = map

    // map.addControl(new BMap.NavigationControl());
    // map.addEventListener("click", function (e) {
    //   // alert(e.point.lng + ", " + e.point.lat);
    //   modal.choosePoint(e.point, map)
    // })
    // map.setCurrentCity("北京");
    return map
  }
  centerAndZoom(value) {
    const modal = window.worker_title

    var map = this.initMap()
    var tmppoint = new BMap.Point(value.lng, value.lat)
    map.centerAndZoom(tmppoint, 17)
    // map.setMapStyle({
    //   styleJson: MapStyle
    // });
    // map.setMapStyleV2({
    //   styleId: '43d968c086b5be12d4cbb687150f2c42'
    // });
    map.removeOverlay(modal.markpoint)
    modal.markpoint = new BMap.Marker(tmppoint)
    map.addOverlay(modal.markpoint)
    map.panTo(tmppoint)

    // modal.choosePoint(value, map)
  }
  refreshMap(props) {
    const { projects, choosedproject, isMobile, dispatch, i18n } = props
    const cantshow =
      choosedproject == 'all' ||
      choosedproject == 'none' ||
      choosedproject == 'recycle'

    if (!cantshow) {
      let targetproj = projects.find(_ => _.objectId == choosedproject)
      if (targetproj) {
        const { Geo, CanAdd } = targetproj
        // this.initMap()
        if (CanAdd != undefined) {
          this.setState({ chooseprojectCanAdd: CanAdd })
        }
        if (Geo) {
          // console.log(Geo)
          let geos = Geo.split(',')
          // console.log(geos)
          this.centerAndZoom(
            new BMap.Point(parseFloat(geos[1]), parseFloat(geos[0]))
          )
        }
      }
    }
  }

  componentDidMount() {
    const { choosedproject, dispatch } = this.props
    this.refreshMap(this.props)
    // dispatch({
    //   type: 'devices/getProjectCanAdd', payload: choosedproject
    // })
  }

  componentWillReceiveProps(nextprops) {
    // const { choosedproject, dispatch } = this.props
    // const cantshow = nextprops.choosedproject == 'all' || nextprops.choosedproject == 'none' || nextprops.choosedproject == 'recycle'

    // if (!cantshow && choosedproject != nextprops.choosedproject) {
    //   dispatch({
    //     type: 'devices/getProjectCanAdd', payload: { projectid: choosedproject }
    //   })
    // }
    // const cantshow = choosedproject == 'all' || choosedproject == 'none' || choosedproject == 'recycle'
    // const nextcantshow = nextprops.choosedproject == 'all' || nextprops.choosedproject == 'none' || nextprops.choosedproject == 'recycle'
    // if (cantshow && cantshow != nextcantshow) {
    //   this.initMap(new BMap.Map("worker_map"));
    // }
    this.refreshMap(nextprops)
  }

  render() {
    const {
      projectlaoding,
      choosedproject,
      isMobile,
      dispatch,
      getcanaddloading,

      i18n,
    } = this.props
    const { chooseprojectCanAdd } = this.state

    const cantshow =
      choosedproject == 'all' ||
      choosedproject == 'none' ||
      choosedproject == 'recycle'

    const editproject = (
      <Button
        size="small"
        disabled={cantshow}
        // type="dashed"
        onClick={e => {
          dispatch({
            type: `devices/showcreateProjectModal`,
            payload: {
              editingproject: choosedproject,
            },
          })
        }}
        style={{
          paddingLeft: 20,
          paddingRight: 20,
          marginLeft: 5,
        }}
        // type="primary"
      >
        <Icon type="edit" />
      </Button>
    )
    const refresh = (
      <Button
        size="small"
        disabled={cantshow}
        onClick={e => {
          dispatch({ type: 'devices/projects' })
        }}
        style={{
          paddingLeft: 10,
          paddingRight: 10,
          marginLeft: 5,
        }}
      >
        <Icon type="sync" />
      </Button>
    )
    const canAddDeviceBtn = (
      <Tooltip
        title={
          chooseprojectCanAdd
            ? i18n.t`The project is currently open`
            : i18n.t`The project is currently not open`
        }
        placement="left"
      >
        <Button
          size="small"
          type={chooseprojectCanAdd ? 'primary' : 'danger'}
          disabled={cantshow}
          loading={getcanaddloading}
          onClick={e => {
            dispatch({
              type: 'devices/projectSetCanAdd',
              payload: {
                projectid: choosedproject,
                can: !chooseprojectCanAdd,
              },
            }).then(() => {
              dispatch({ type: 'devices/projects' })
            })
          }}
          style={{
            transition: 'all 0s',
          }}
        >
          {chooseprojectCanAdd ? (
            <Trans>Allowed to add devices</Trans>
          ) : (
            <Trans>No additional devices allowed</Trans>
          )}{' '}
          &nbsp;
          {chooseprojectCanAdd ? <Icon type="check" /> : <Icon type="stop" />}
        </Button>
      </Tooltip>
    )
    const rightbtns = isMobile ? (
      <div>
        {canAddDeviceBtn}
        <div style={{ display: 'flex' }}>
          {editproject}
          {refresh}
        </div>
      </div>
    ) : (
      <div style={{ display: 'flex' }}>
        {canAddDeviceBtn}
        {editproject}
        {refresh}
      </div>
    )

    const mapheight = 100
    const content = (
      <Fragment>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <span
            style={{
              display: 'inline-block',
              fontWeight: 'bold',
              fontSize: 16,
            }}
          >
            <Trans>Project Details</Trans>
          </span>
          {rightbtns}
        </div>
        {/* {workers.length > 0 ? (
          workers.map(item => {
            // <Tag >{item.username}</Tag>
            ; <UserLink style={{ display: 'inline-block' }} data={item} />
          })
        ) : (
            <Empty />
          )} */}
        <Spin spinning={projectlaoding}>
          <div style={{ position: 'relative' }}>
            {cantshow && (
              <div
                style={{
                  width: '100%',
                  height: mapheight,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  background: 'white',
                  position: 'absolute',
                  lef: 0,
                  top: 0,
                  zIndex: 1,
                }}
              >
                <Empty style={{ height: 100, overflow: 'hidden' }} />
              </div>
            )}
            <div
              id="worker_map"
              style={{ width: '100%', height: mapheight, marginTop: 5 }}
            />
          </div>
        </Spin>

        {/* {TarGeo ? <img width="280" height="140" src={`http://api.map.baidu.com/staticimage/v2?ak=eDchGyK8ACCw7KSUpCXg96rq43I3TXGM&mcode=666666&center=${TarGeo}&width=300&height=200&zoom=15`} />
          :
          <Empty />
        } */}
      </Fragment>
    )

    const contentstyle = isMobile
      ? {
          borderStyle: 'solid',
          borderColor: 'rgba(244,244,244,1)',
          borderWidth: 1,
          borderRadius: 5,
          padding: 15,
          paddingTop: 15,
          marginBottom: 10,
        }
      : {
          padding: 15,
          paddingTop: 5,
          marginBottom: 10,
        }
    return (
      <Fragment>
        <div
          style={{
            ...contentstyle,
            ...(cantshow
              ? {
                  color: 'rgba(208,208,208,1)',
                }
              : {
                  color: 'black',
                }),
          }}
        >
          {content}
        </div>
        {!isMobile && <Divider style={{ marginTop: 5, marginBottom: 10 }} />}
      </Fragment>
    )
  }
}

const MapStyle = [
  {
    featureType: 'land',
    elementType: 'geometry',
    stylers: {
      color: '#f7f7f7ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#f7f7f7ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'building',
    elementType: 'geometry.fill',
    stylers: {
      color: '#ecebe8ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'building',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#ddd9cfff',
      visibility: 'on',
    },
  },
  {
    featureType: 'water',
    elementType: 'geometry',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'village',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'town',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'district',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'country',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'city',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'continent',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'poilabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'poilabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'scenicspotslabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'scenicspotslabel',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'transportationlabel',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'transportationlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: {
      weight: 3,
    },
  },
  {
    featureType: 'green',
    elementType: 'geometry',
    stylers: {
      color: '#7b859fff',
      visibility: 'on',
    },
  },
  {
    featureType: 'scenicspots',
    elementType: 'geometry',
    stylers: {
      color: '#f7f7f7ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'scenicspots',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'scenicspots',
    elementType: 'labels.text.stroke',
    stylers: {
      weight: 1,
      color: '#8c8c8cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'continent',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'country',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'city',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'city',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'scenicspotslabel',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'transportationlabel',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'railway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'subway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'highwaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'nationalwaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'nationalwaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'provincialwaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'provincialwaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'tertiarywaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'tertiarywaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'subwaylabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'subwaylabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
      weight: 90,
    },
  },
  {
    featureType: 'road',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'shopping',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'scenicspots',
    elementType: 'labels',
    stylers: {
      visibility: 'on',
    },
  },
  {
    featureType: 'scenicspotslabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'manmade',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'manmade',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'highwaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off',
    },
  },
  {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#7b859f00',
      visibility: 'on',
    },
  },
  {
    featureType: 'road',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'road',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'road',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'road',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'road',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'road',
    elementType: 'labels.text',
    stylers: {
      fontsize: 24,
    },
  },
  {
    featureType: 'highway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#1c4f7eff',
    },
  },
  {
    featureType: 'highway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      weight: 3,
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#1c4f7eff',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      weight: 3,
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'tertiaryway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'fourlevelway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'local',
    elementType: 'geometry.fill',
    stylers: {
      color: '#848484ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'arterial',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'tertiaryway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'fourlevelway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'local',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#66615cff',
      visibility: 'on',
    },
  },
  {
    featureType: 'local',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'local',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'fourlevelway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'tertiaryway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'arterial',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#3d4b71ff',
      visibility: 'on',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'arterial',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'tertiaryway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'fourlevelway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#8c8c8cff',
      visibility: 'on',
      weight: 1,
    },
  },
  {
    featureType: 'fourlevelway',
    elementType: 'geometry',
    stylers: {
      weight: 1,
    },
  },
  {
    featureType: 'tertiaryway',
    elementType: 'geometry',
    stylers: {
      weight: 1,
    },
  },
  {
    featureType: 'local',
    elementType: 'geometry',
    stylers: {
      weight: 1,
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
      weight: 3,
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      weight: 3,
    },
  },
  {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
      weight: 3,
    },
  },
  {
    featureType: 'highway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'highway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'highway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'highway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'nationalway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'nationalway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'nationalway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'nationalway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'provincialway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '8,10',
      level: '8',
    },
  },
  {
    featureType: 'provincialway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '8,10',
      level: '9',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '8,10',
      level: '8',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '8,10',
      level: '9',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '8,10',
      level: '8',
    },
  },
  {
    featureType: 'provincialway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '8,10',
      level: '9',
    },
  },
  {
    featureType: 'cityhighway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'cityhighway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'cityhighway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'cityhighway',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '6',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '7',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '8',
    },
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '6,9',
      level: '9',
    },
  },
  {
    featureType: 'arterial',
    stylers: {
      curZoomRegionId: '0',
      curZoomRegion: '9,9',
      level: '9',
    },
  },
  {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '9,9',
      level: '9',
    },
  },
  {
    featureType: 'arterial',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      curZoomRegionId: '0',
      curZoomRegion: '9,9',
      level: '9',
    },
  },
]

export default Workers
